<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
    <link href="bootstrap-5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="vue@3.5.4/vue.global.js"></script>
    <script src="axios@1.7.7/axios.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <ul class="nav">
            <li class="nav-item">
                <a class="navbar-brand" aria-current="page" href="#">工院论坛</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" aria-current="page" href="/">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link  active" href="#">文章详情</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container-fluid" id="app">
    <div class="card" style="width: 100%;">
        <div class="card-body">
            <h5 class="card-title">{{article.title}}</h5>
            <p class="card-text">{{article.content}}</p>
        </div>
    </div>
    <hr class="divider border-info">
    <div class="card" style="width: 100%;">
        <div class="card-body">
            <div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">作者</label>
                <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="作者"
                       v-model="comment.author">
            </div>
            <div class="mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">内容</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                          v-model="comment.content"></textarea>
            </div>
            <input type="hidden" v-model="comment.aId">
            <button class="btn btn-outline-success" type="button" @click="onComment">提交</button>
        </div>
    </div>
    <hr class="divider border-info">
    <div class="card" style="width: 100%;">
        <div class="card-body">
            <h4 class="card-title">评论列表</h4>
            <ul class="list-group">
                <li class="list-group-item" v-for="comment in article.commentList">
                    <p class="fw-bolder fs-6">{{comment.author}}</p>
                    <p class="fw-light fs-5">{{comment.content}}</p>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    const app = {
      data() {
        return {
          article: {},
          comment: {
            author: '测试作者',
            content: '测试内容嘻嘻嘻'
          }
        }
      },
      mounted () {
        let queryString = window.location.search
        const urlParams = new URLSearchParams(queryString);
        // 获取特定的参数
        const id = urlParams.get('id');
        this.comment.aId = id
        axios.get('/article/' + id).then(resp => {
            // 处理成功情况
            if(!!resp.data && resp.data.code === 0) {
                this.article = resp.data.data
                console.log(this.article)
            }
          })
      },
      methods: {
        onComment() {
          axios.post('/comment', this.comment, {
              headers: {
                'Content-Type': 'application/json'
              }
          }).then(resp => {
            if(!!resp.data && resp.data.code === 0) {
                this.article.commentList.push(this.comment)
            }
          })
        }
      }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>